$(function () {
  const layer = layui.layer
  const form = layui.form
  // 1、获取文章分类的列表
  initArtCateList()
  function initArtCateList () {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        if (res.status !== 0) {
          return '获取列表失败'
        }
        // 获取列表成功之后, 调用template()
        let htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
      }
    })
  }

  // 2、添加类别
  // 点击添加类别 , 打开添加的弹出层
  var indexAdd = null
  $('#addCate').on('click', function () {
    indexAdd = layer.open({
      // type指定当前弹窗的类型,
      type: 1,
      title: '添加文章分类',
      area: ['500px', '250px'],
      // 指定弹窗的内容,可以是 String/DOM/Array
      content: $('#dialog-add').html()
    });
  })

  // 通过事件委托, 把submit事件委托给body;
  $('body').on('submit', '#formAdd', function (e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/my/article/addcates',
      data: $('#formAdd').serialize(),
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('新增文章分类失败!')
        }
        // 重新获取更新之后的文章分类
        initArtCateList()
        // 关闭弹窗之前, 给一个提示信息 msg
        layer.msg('新增文章分类成功!')
        // 关闭弹窗,根据定义好的 indexAdd 索引, 通过close方法
        layer.close(indexAdd)
      }
    })
  })

  // 3、编辑类别
  // 点击编辑按钮, 打开编辑的弹出层
  var indexEdit = null
  // 通过事件委托的形式把编辑按钮的点击事件, 绑定给当前真实DOM
  $('tbody').on('click', '.btn-edit', function (e) {
    indexEdit = layer.open({
      type: 1,
      title: '修改文章分类',
      area: ['500px', '250px'],
      content: $('#dialog-edit').html()
    })

    // 根据当前数据条目的 Id 发起请求获取该条数据
    let id = $(this).attr('data-id')
    $.ajax({
      method: 'GET',
      url: `/my/article/cates/${id}`,
      success: function (res) {
        if (res.status == 0) {
          // 通过 form.val('值', 数据对象)快速赋值 => 通过给 form 表单设置 lay-filter="值"
          form.val('form-edit', res.data)

        }
      }
    })
  })
  // 通过事件代理，把forEdit的submit事件代理给 body
  // 为了区分当前文档不同的submit事件，给添加+编辑的submit分别设置事件源
  $('body').on('submit', '#formEdit', function (e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/my/article/updatecate',
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('编辑文章类别失败！请重新编辑')
        }
        // 关闭弹出框
        layer.close(indexEdit)
        layer.msg('编辑成功！')
        initArtCateList()
      }
    })
  })

  // 4、删除某条分类列别数据
  $('tbody').on('click', '.btn-delete', function () {
    let id = $(this).attr('data-id')
    layer.confirm('是否删除该条分类？', { icon: 3, title: '提示' }, function (index) {
      $.ajax({
        method: 'GET',
        url: `/my/article/deletecate/${id}`,
        success: function (res) {
          if (res.status !== 0) {
            return layer.msg('删除失败！请重新删除')
          }
          layer.msg('删除成功')
          initArtCateList()
        }
      })
      layer.close(index);
    });

  })
})
